<template>
	<view class="select-box">
		<picker :value="multiIndex" :range="multiArray" range-key="name" class="model-picker" mode="multiSelector"
			:disabled="disabled" @columnchange="bindMultiPickerChange" @change="selectModel">
			<text class="t2">{{phoneModelName}}</text>
			<slot :model="model">
				<!-- <text class="t2">{{model.brand +' '+model.name}}</text> -->
			</slot>
		</picker>
	</view>
</template>

<script>
	import {
		getphoneModel,
		setDefaultPhoneModel
	} from '@/api/user.js'
	import {
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				model: {},
				list: [],
				multiArray: [
					[],
					[]
				],
				multiIndex: [0, 0],
			}
		},
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
		},
		computed: {
			...mapGetters(['phoneModelList', 'phoneModelId', 'phoneModelName'])
		},
		watch: {
			phoneModelId(newValue, oldValue) {
				if (this.phoneModelList.length > 0)
					this.setList()
			},
			phoneModelList(newValue, oldValue) {
				if (newValue.length > 0)
					this.setList()
			},
		},
		methods: {
			...mapMutations(['setPhoneModelName', 'setPhoneModelId']),
			...mapActions(['setPhoneModelList']),
			// 处理数据格式
			setList() {
				if (this.phoneModelList.length == 0) return
				let brandData = this.phoneModelList
				let modelData = brandData[0].childrenList
				this.multiArray = [brandData, modelData]

				for (let i = 0; i < brandData.length; i++) {
					for (let j = 0; j < brandData[i].childrenList.length; j++) {
						if (this.phoneModelId == brandData[i].childrenList[j].id) {
							this.multiIndex = [i, j]
							console.log(this.multiIndex);
							this.bindMultiPickerChange({
								detail: {
									column: 0,
									value: i
								}
							})
							if (!this.phoneModelName) {
								this.$emit('selectModel', this.phoneModelId)
							}
						}
					}
				}
				this.model = {
					brand: this.phoneModelList[this.multiIndex[0]].name,
					name: this.phoneModelList[this.multiIndex[0]].childrenList[this.multiIndex[1]].name
				}
				this.setPhoneModelName(this.model.name)
			},
			bindMultiPickerChange(e) {
				if (e.detail.column == 0) {
					this.multiArray = [this.multiArray[0], this.phoneModelList[e.detail.value].childrenList]
				}
			},
			// 修改型号
			selectModel(e) {
				this.multiIndex = e.detail.value
				this.model = {
					brand: this.phoneModelList[this.multiIndex[0]].name,
					name: this.phoneModelList[this.multiIndex[0]].childrenList[this.multiIndex[1]].name
				}
				setDefaultPhoneModel({
					phoneModelId: this.phoneModelList[this.multiIndex[0]].childrenList[this.multiIndex[1]].id
				}).then(res => {
					console.log(res.data.phoneModelName);
					this.setPhoneModelId(this.phoneModelList[this.multiIndex[0]].childrenList[this.multiIndex[1]]
						.id)
					this.setPhoneModelName(res.data.phoneModelName)
				})
				this.$emit('selectModel', this.phoneModelList[this.multiIndex[0]].childrenList[this.multiIndex[1]].id)
			},
		},
		mounted() {
			// this.getphoneModel()
			this.setList()
		}
	}
</script>

<style lang="scss" scoped>
	.select-box {
		.model-picker {
			display: inline-block;
			color: #333333;
			margin-left: 15rpx;

			.t1 {
				color: #6C7172;
			}

			.t2 {
				color: #979797;
			}

			.t3 {
				text-decoration: underline;
			}
		}
	}
</style>